import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import cx from 'classnames';
import { WingBlank, WhiteSpace, DatePicker, Picker, InputItem, Flex, List, Button, Toast } from 'antd-mobile';
import { Link, routerRedux } from 'dva/router';
import styles from '../scale/styles.less';
import { SCALE_PHY, SCALE_PRE } from 'const';

function ScalePreTemplate({ dispatch, location, form, questions, scalevalue, detail, ...rest }) {
  const { getFieldProps, getFieldValue, setFieldsValue, validateFields, getFieldError } = form;
  const {patientValue} = detail;
  const { Item } = List;
  if (!questions || questions.length !== SCALE_PHY.length) {
    questions = SCALE_PRE;
  }
   let inp;
  if(patientValue){
    inp = patientValue.split("|");
  }
  let radio = inp[inp.length-1].split(",");
  function isActive(key, value, i) {
    if (radio.indexOf(i) != -1) {
      // return radio[i] === value;
      return true;
    }

    if (!getFieldValue(key)) {
      return false;
    }

    // return getFieldValue(key) === value;
  }

  return (
    <WingBlank size="md">
      <WhiteSpace size="md" />
      <List>
        <Item >{inp[2] == 1 ? "复诊" : "初诊"}</Item>
        <InputItem
          value={inp[4]}
          editable={false}
        >
          身高(cm)
        </InputItem>
        <InputItem
          value={inp[5]}
          editable={false}
        >
          体重(kg)
        </InputItem>
        <InputItem
          value={inp[0]}
          editable={false}
        >
          怀孕次数
        </InputItem>
        <InputItem
          value={inp[1]}
          editable={false}
        >
          生产次数
        </InputItem>
        <InputItem
          value={inp[3]}
          editable={false}
        >
          孕周
        </InputItem>        
      </List>  
        <WhiteSpace size="md" />
        {questions.map((question, id) => (
          <div>
          
          <List>
            <Item>
              {question.title}
            </Item>
         {question.subject.map((question, i) => (
              <List.Item wrap key={question.id}>
                {`${i + 1}. ${question.title}`}
                <List.Item.Brief>
                  <Flex wrap="wrap" className={styles.questionOptions}>
                    {question.item.map((option, ii) => {
                      const key = option.id;
                      const value = option.title;
                      const item = option.id;
                      return (
                        <label key={key} className={cx(styles.questionOption, styles.questionOptionNormal, { [styles.questionOptionActive]: isActive(key, value, item) })}>
                          <input {...getFieldProps(`${key}`)} type="checkbox" name={key} value={value}   />
                          {value}
                        </label>
                      );
                    })}
                  </Flex>
                </List.Item.Brief>
              </List.Item>
            ))}
          </List>
          <WhiteSpace size="lg" />
            </div>
        ))}
    </WingBlank>
  );
}

export default connect(({ scale }) => ({ ...scale }))(createForm()(ScalePreTemplate));
